<template>
	<div id="ziliaoweihu">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
		  <el-form-item label="公司名称" prop="name">
		    <el-input v-model="ruleForm.name"></el-input>
		  </el-form-item>
		    <el-form-item label="法定代表人姓名" prop="name">
		      <el-input v-model="ruleForm.fdrname"></el-input>
		    </el-form-item>
		  <el-form-item label="公司地址" prop="region"  style="float: left 20px;">
		    <el-select v-model="ruleForm.region" placeholder="请选择地址" style="width: 20%;">
				<el-option
				  v-for="item in options"
				  :key="item.value"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			  
		    </el-select>
			<el-select v-model="value" clearable placeholder="请选择">
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			  </el-select>
			  <el-select v-model="value" clearable placeholder="请选择">
			      <el-option
			        v-for="item in options"
			        :key="item.value"
			        :label="item.label"
			        :value="item.value">
			      </el-option>
			    </el-select>
				<el-select v-model="value" clearable placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
		
		  </el-form-item>
		  
		  
		  <el-form-item label="详细地址" prop="dz">
		    <el-input v-model="ruleForm.dz"></el-input>
		  </el-form-item>
		  
		   <el-form-item label="经营类型" prop="leixi">
		      <el-select  v-model="ruleForm.leixi" placeholder="请选择类型"
			  style="inline-heigth: 100px; text-align: center; margin: auto;">
		        <el-option label="酒水/饮料" value="shanghai"></el-option>
		        <el-option label="槟榔/零食" value="beijing"></el-option>
		      </el-select>
		    </el-form-item>
			
			
			
		  <el-form-item label="手机号码" prop="haoma">
		    <el-input v-model="ruleForm.haoma"></el-input>
		  </el-form-item>
		  
		  <!-- 图片上传 -->
		  <el-form-item label="营业执照" prop="img" style="width: 50%;">
		  		  <el-upload
		  			class="avatar-uploader"
		  			action="https://jsonplaceholder.typicode.com/posts/"
		  			:show-file-list="false"
		  			:on-success="handleAvatarSuccess"
		  			:before-upload="beforeAvatarUpload">
		  			<img v-if="imageUrl" :src="imageUrl" class="avatar">
		  			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  		  </el-upload>
		    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
		  
		  
		    
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
	        ruleForm: {
	          name: '',
	          region: '',
			  leix:'',
			  haoma:''
	         
	        },
	        rules: {
	          name: [
	            { required: true, message: '请输入活动名称', trigger: 'blur' },
	            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
	          ],
	          region: [
	            { required: true, message: '请选择', trigger: 'change' }
	          ],
	          leix: [
	            { required: true, message: '请选择类型', trigger: 'change' }
	          ],
	         haoma: [
	           { required: true, message: '请输入手机号码', trigger: 'change' }
	         ],
	        }
	      };
	    },
	    methods: {
	      submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) {
	            alert('submit!');
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      resetForm(formName) {
	        this.$refs[formName].resetFields();
	      }
	    },
		// 图片上传
		handleAvatarSuccess(res, file) {
		        this.imageUrl = URL.createObjectURL(file.raw);
		      },
		      beforeAvatarUpload(file) {
		        const isJPG = file.type === 'image/jpeg';
		        const isLt2M = file.size / 1024 / 1024 < 2;
		
		        if (!isJPG) {
		          this.$message.error('上传头像图片只能是 JPG 格式!');
		        }
		        if (!isLt2M) {
		          this.$message.error('上传头像图片大小不能超过 2MB!');
		        }
		        return isJPG && isLt2M;
		      },
			      submitForm(formName) {
			        this.$refs[formName].validate((valid) => {
			          if (valid) {
			            // 提交表单数据
			          } else {
			            console.log('error submit!!');
			            return false;
			          }
			        }),
					 this.$confirm('此操作将保存, 是否继续?', '提示', {
					          confirmButtonText: '确定',
					          cancelButtonText: '取消',
					          type: 'warning'
					        }).then(() => {
					          this.$message({
					            type: 'success',
					            message: '保存成功!'
					          });
					        }).catch(() => {
					          this.$message({
					            type: 'info',
					            message: '已取消保存'
					          });          
					        });
			      }
		
	  }
</script>

<style>
</style>